<template>
  <div>
    <!-- 下拉容器*此组件内部请求api，如要多个请创建多个该组件 -->
    <vxe-form-item 
        field="xsown" 
        :title="dcTitleName" 
        span="8" 
    >
    <vxe-pulldown ref="xDown4" transfer>
        <template v-slot>
            <vxe-input 
            v-model="value" 
            suffix-icon="fa fa-search" 
            :placeholder="dcPlaceholder" 
            @keyup="keyupEvent" 
            @focus="focusEvent" 
            @suffix-click="suffixClick"
            ></vxe-input>
            
        </template>
        <template v-slot:dropdown>
            <div class="my-dropdown4">
            <vxe-grid
                id="2323"
                rowId='id'
                size="mini"
                highlight-hover-row
                stripe
                align="center"
                border="outer"
                show-overflow
                :checkbox-config="{showHeader:true,trigger:'row',reserve:true,highlight:true}"
                auto-resize
                height="300"
                :loading="loading"
                :pager-config="tablePage"
                :data="tableData"
                :columns="tableColumn"
                @page-change="pageChangeEvent"
                @checkbox-change="checkboxClick"
                @checkbox-all="checkboxClickAll"
                >
            </vxe-grid>
            </div>
        </template>
        </vxe-pulldown>
    </vxe-form-item>

          <!-- 表格组件 -->
  <ex-base-table
    ref="exBaseTable"
    :tableColumn="tableColumn"
    :tableData="tableData"
    :loading.sync="loading"
    @handleRemoveEmit="handleRemoveEmit"
    @handleCreateEmit="handleCreateEmit"
    @handleUpdateEmit="handleUpdateEmit"
    @handleRmoveColEmit="handleRmoveColEmit"
    @customSortMethodEmit="customSortMethodEmit"
    >
  </ex-base-table>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

export default {
  name: 'SearchFormDropdContDemoItem',
  components: {
    //PageHeaderLayout,
  },
  // 定义属性
  data() {
    return {
      // 测试功能-下拉容器-实现分页表格--------开始
      // input的值
      value: '',
      // 表格的字段
      tableColumn: [
        {type: 'checkbox'},
        {type:'seq'},
          { field: 'lp_code', title: '法人代码', width: 200 , showOverflow: true, sortable:true},
          { field: 'lp_name', title: '法人名称', width: 300 },
      ],
      // 表格加载数据loading
      loading: false,
      // 表格数据
      tableData: [],
      // 示例填充数据
      tableList: [
        {id:1, name: 'Test1', role: '前端', sex: '男' },
        {id:2,  name: 'Test2', role: '后端', sex: '男' },
        {id:3,  name: 'Test3', role: '测试', sex: '男' },
        { id:4, name: 'Test4', role: '设计师', sex: '女' },
        { id:5, name: 'Test5', role: '前端', sex: '男' },
        {id:6,  name: 'Test6', role: '前端', sex: '男' },
        {id:7,  name: 'Test7', role: '前端', sex: '男' }
      ],
      // 分页设置
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      // 测试功能-下拉容器-实现分页表格--------结束
    }
  },
  props:{
    // title
    dcTitleName:{
        type:String
    },
    // Placeholder提示
    dcPlaceholder:{
        type:String
    },
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {
      value(newVal){
          // 监听value值变化，回传父组件
          this.$emit("dtValueChangeEmit",newVal);
      }
  },
  // 方法集合
  methods: {
    /* 下拉容器-start */
    // 输入框获取焦点
       initTableCols(){
     const tabCols = [  //动态增加的字段 传进来的
            { field: 'te_date', title: '生效日期', width: 200 , showOverflow: true},
            { field: 'curr_code', title: '币种编号', width: 300, sortable:true },
            { field: 'curr_name', title: '币种名称', width: 200 },
            { field: 'curr_type', title: '币种标识符', width: 200 },
            { field: 'lp_code', title: '法人代码', width: 300 }, 
            { field: 'mod_us_code', title: '修改用户', width: 300 },
            { field: 'mod_date', title: '修改时间', width: 300 },
        ]
        this.tableColumn = tabCols;
    },
    focusEvent () {
        this.$refs.xDown4.showPanel()
    },
    // 点击input尾部图标触发事件
    suffixClick() {
      this.$refs.xDown4.togglePanel()
    },
    // 加载表格数据
    keyupEvent () {
        const { value } = this
        console.log('检索框的值',value);
        this.loading = true
        setTimeout(() => {
          this.loading = false
          if (value) {
            // 此处可换为api请求
            this.tableData = this.tableList.filter(row => row.name.indexOf(value) > -1)
          } else {
            // 此处可换为api请求
            this.tableData = this.tableList.slice(0)
          }
        }, 100)
    },
    
    // 表格行点击事件（弃用）
    /* cellClickEvent4 ({ row }) {
      this.value = row.name
      this.$refs.xDown4.hidePanel()
    }, */
    // 分页改变事件
    pageChangeEvent ({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
    },
    // 选中或取消选中
    checkboxClick({ records}){
      this.value = records.map(item =>  item.name ).join()
      // this.$refs.xDown4.hidePanel()
      console.log('checkboxClick::',this.value)
    },
    // 全选
    checkboxClickAll({ records }){
        this.value = records.map(item =>  item.name ).join()
        console.log('checkboxClick::',this.value)
    },
    /* 下拉容器-end */

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initTableCols()
    // 初始化表格数据
    this.findList()
    this.keyupEvent()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>